<template>
  <div>
    <div class="header">
      <i class="el-icon-magic-stick"></i> 北区创新楼8楼空调采集频率统计
    </div>
    <el-table ref="table" :data="airConditionData" stripe style="width: 100%;margin-bottom: 100px;" height="390" id="scoll">
      <el-table-column type="index" width="60" align="center"></el-table-column>
      <el-table-column prop="name" label="电脑名称" sortable align="center"></el-table-column>
      <el-table-column prop="location" label="位置" align="center"></el-table-column>
      <el-table-column prop="time" label="采集时间" sortable align="center"></el-table-column>
      <el-table-column prop="loopCounter" label="采集频率" align="center"></el-table-column>
      <el-table-column prop="uuid" label="uuid" align="center"></el-table-column>
    </el-table>
    <div id="guanxi" style="width: 1080px;height: 250px;margin-left: 10%;"></div>
  </div>
</template>

<script>
  export default {
    name: 'airCondition',
    data() {
      return {
        airConditionData: require('../../../assets/json/airCondition.json'),
        axisData: [],
        data: []
      }
    },
    mounted() {
      this.numberStatistics();
      this.drawLine();
      this.tableScroll();
    },
    methods: {
      tableScroll() {
        // 拿到表格挂载后的真实DOM
        const table = this.$refs.table;
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper;
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
        window.onresize = () => {
          return (() => {
            window.screenHeight = document.body.clientHeight;
            this.clientHeight = window.screenHeight;
          })()
        }
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('guanxi'));
        const links = this.data.map(function (item, i) {
          return {
            source: i,
            target: i + 1
          };
        });
        links.pop();
        myChart.setOption({
          title: {
            text: '采集频率关系图'
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.axisData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              type: 'graph',
              layout: 'none',
              coordinateSystem: 'cartesian2d',
              symbolSize: 40,
              label: {
                show: true
              },
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [4, 10],
              data: this.data,
              links: links,
              lineStyle: {
                color: '#2f4554'
              }
            }
          ]
        })
        window.addEventListener("resize", function() { //自动适应大小
        	myChart.resize();
        });
      },
      numberStatistics() {
        this.axisData = [];
        this.data = []
        this.airConditionData.forEach(item => {
          this.axisData.push(item.id);
          this.data.push(item.loopCounter);
          
        })
      }
    }
  }
</script>

<style>
  @import url("../../../assets/css/roadLight.css");
</style>
